import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card } from 'antd';
import { connect } from 'dva';
import TableForm from './TableForm';

@connect(({ menuManage, loading }) => ({
  menuManage,
  loading: loading.models.menuManage,
}))
@Form.create()
export default class MenuManage extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'menuManage/fetchMenuList',
      payload: {},
    });

    dispatch({
      type: 'menuManage/fetchRoles',
      payload: {},
    });
  }

  render() {
    const {
      menuManage: { menuList, rolesList },
      dispatch,
      loading,
    } = this.props;

    const tableFormProps = {
      dispatch,
      loading,
      menuList,
      rolesList,
    };

    return (
      <Card title='菜单管理' bordered={false}>
        <TableForm {...tableFormProps} />
      </Card>
    );
  }
}
